<template>
  <f7-page>
    <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">徽标</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div>

    <qm-block title="应用入口">
      <div>
        <div class="entry-list">
          <qm-badge content="新">
            <qm-entry :data="entry[0]" iconWidth="96"></qm-entry>
          </qm-badge>
          <qm-badge content="150" max="99">
            <qm-entry :data="entry[1]" iconWidth="96"></qm-entry>
          </qm-badge>
          <qm-badge content="1" color="#4686ff">
            <qm-entry :data="entry[2]" iconWidth="96"></qm-entry>
          </qm-badge>
          <qm-badge dot>
            <qm-entry :data="entry[3]" iconWidth="96"></qm-entry>
          </qm-badge>
          <qm-badge>
            <qm-entry :data="entry[3]" iconWidth="96"></qm-entry>
            <template #content>
                <f7-icon f7="arrow_down" style="font-size: 10px"></f7-icon>
            </template>
          </qm-badge>
        </div>
        <br>
        <div>
            <qm-badge content="30"></qm-badge>
            <qm-badge content="30" max="10"></qm-badge>
            <qm-badge content="新"></qm-badge>
            <qm-badge dot></qm-badge>
        </div>
      </div>
    </qm-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      entry: [
        {
          image: "static/img/home/home-4/entry-1.png",
          title: "随机巡查",
        },
        {
          image: "static/img/home/home-4/entry-2.png",
          title: "巡查任务",
        },
        {
          image: "static/img/home/home-4/entry-3.png",
          title: "巡查轨迹",
        },
        {
          image: "static/img/home/home-4/entry-4.png",
          title: "任务派单",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.entry-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
